<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px" filterable>
            <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border :summary-method="getSummaries" size="small">
        <el-table-column align="center" prop="nick" label="工号" width="100"></el-table-column>
        <el-table-column align="center" label="收银台收入（预收）">
          <el-table-column align="center" label="现金">
            <el-table-column align="center" label="应收" prop="cash_receivable"></el-table-column>
            <el-table-column align="center" label="实收" prop="cash_actual"> </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="银行卡">
            <el-table-column align="center" label="应收" prop="bank_receivable"></el-table-column>
            <el-table-column align="center" label="实收" prop="bank_actual"> </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="代收代核">
            <el-table-column align="center" label="应收" prop="collecting_receivable"> </el-table-column>
            <el-table-column align="center" label="实收" prop="collecting_actual"></el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="koubei_convert" label="口碑核销"> </el-table-column>
          <el-table-column align="center" prop="kuaiying_convert" label="快盈核销"> </el-table-column>
          <el-table-column align="center" prop="money_aliy" label="支付宝"></el-table-column>
          <el-table-column align="center" prop="money_wx" label="微信"> </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="wx" label="小程序核销"></el-table-column>
        <el-table-column align="center" label="兑币机">
          <el-table-column align="center" prop="cash_convert" label="现金"></el-table-column>
          <el-table-column align="center" prop="aliy_convert" label="支付宝"></el-table-column>
          <el-table-column align="center" prop="wechat_convert" label="微信"> </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="扫码支付">
          <el-table-column align="center" label="支付宝">
            <template slot-scope="scope">
              {{nullList.length == 0?'-':alipay}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="微信">
            <template slot-scope="scope">
              {{nullList.length == 0?'-':weChat}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="recover" label="追账金额"></el-table-column>
        <el-table-column align="center" prop="all_receivable" label="应收合计"></el-table-column>
        <el-table-column align="center" prop="all_actual" label="实收合计"></el-table-column>
        <el-table-column align="center" prop="diff" label="差异">
          <template slot-scope="scope">
            <span :class="{danger:scope.row.diff!=0}">{{scope.row.diff}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table highlight-current-row class="el-table__footer-wrapper" :data="remark" :show-header="false" border size="small">
        <el-table-column align="center" prop="name" width="100"></el-table-column>
        <el-table-column align="center" prop="text"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getPage, getStoreList, getAreaList } from '@/api/storage_control/revenueDay_form';
export default {
  data() {
    return {
      wx: 0,
      list: [],
      nullList: [],
      alipay: 0,
      weChat: 0,
      remark: [{ name: '备注', text: '' }],
      listLoading: false,
      storeList: null,
      areaList: [],
      formInline: {
        store_id: '',
        area_id: '',
        datetime: '',
        look_del: '0'
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()))
        .toISOString()
        .slice(0, 10)
        .replace('-', '.')
        .replace('-', '.')
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    beforeComingIn() {
      if (this.$route.params.from == 2) {
        this.formInline.store_id = this.$route.params.store_id;
        this.formInline.look_del = this.$route.params.look_del;
        this.formInline.area_id = this.$route.params.area_id;
        this.pickerDate = this.$route.params.pickerDate;
      }
      this.getStore(1);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index > 0) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += 0;
            sums[index] = sums[index].toFixed(2) * 1;
          } else {
            sums[index] = '-';
          }
        }
        if (index === 11) {
          sums[index] = this.wx;
          return;
        }
        if (index === 15) {
          sums[index] = this.alipay;
          return;
        }
        if (index === 16) {
          sums[index] = this.weChat;
          return;
        }
        if (index === 17) {
          sums[index] = this.recover;
          return;
        }
        if (index === 18) {
          sums[index] = this.total_receivable;
          return;
        }
        if (index === 19) {
          sums[index] = this.total_actual;
          return;
        }
        if (index === 20) {
          sums[index] = (this.total_receivable * 1 - this.total_actual * 1).toFixed(2) * 1;
          return;
        }
      });
      return sums;
    },
    getStore(ok) {
      getStoreList({ look_del: this.formInline.look_del, category_id: 281 }).then(response => {
        this.storeList = response;
        if (this.$route.params.store_id == null) {
          let data = response.filter(res => res.id == this.$store.getters.optionId);
          if (data.length > 0) {
            this.formInline.store_id = data[0].id;
          } else {
            if (this.storeList.length > 0) {
              this.formInline.store_id = this.storeList[0].id;
            }
          }
        } else {
          this.formInline.store_id = this.$route.params.store_id;
        }

        if (ok) {
          this.storeChange(ok);
        }
      });
    },
    storeChange(ok) {
      getAreaList({ sid: this.formInline.store_id }).then(response => {
        response.unshift({ id: '', name: '全部区域' });
        this.areaList = response;
        this.formInline.area_id = ok ? this.formInline.area_id : '';
        if (ok) {
          this.searchClick();
        } else {
          this.formInline.area_id == '';
        }
      });
    },
    // 搜索
    searchClick() {
      if (this.formInline.store_id == '') {
        this.$message({ type: 'error', message: '请选择门店' });
        return;
      }
      this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.list = [];
      this.nullList = [
        {
          aliy_convert: '-',
          bank_actual: '-',
          bank_convert: '-',
          bank_receivable: '-',
          cash_convert: '-',
          cash_receivable: '-',
          collecting_actual: '-',
          collecting_receivable: '-',
          koubei_convert: '-',
          kuaiying_convert: '-',
          wechat_convert: '-',
          money_aliy: '-',
          money_wx: '-',
          cash_actual: '-',
          nick: '-',
          all_receivable: '-',
          all_actual: '-',
          diff: '-',
          recover: '-',
          wx: '-'
        }
      ];
      this.remark[0].text = '';
      let total_receivable = 0;
      let total_actual = 0;
      getList(this.formInline)
        .then(response => {
          response.list.forEach(val => {
            val.money_wx *= 1;
            val.wx = '-';
            val.money_aliy *= 1;
            val.koubei_convert *= 1;
            val.kuaiying_convert *= 1;
            val.all_receivable =
              (
                val.cash_receivable * 1 +
                val.money_aliy * 1 +
                val.money_wx * 1 +
                val.bank_receivable * 1 +
                val.collecting_receivable * 1 +
                val.cash_convert * 1 +
                val.aliy_convert * 1 +
                val.wechat_convert * 1 +
                val.koubei_convert * 1 +
                val.kuaiying_convert * 1
              ).toFixed(2) * 1;
            val.all_actual =
              (
                val.cash_actual * 1 +
                val.money_aliy * 1 +
                val.money_wx * 1 +
                val.bank_actual * 1 +
                val.collecting_actual * 1 +
                val.cash_convert * 1 +
                val.aliy_convert * 1 +
                val.wechat_convert * 1 +
                val.koubei_convert * 1 +
                val.kuaiying_convert * 1
              ).toFixed(2) * 1;
            val.diff = (val.all_receivable * 1 - val.all_actual * 1).toFixed(2) * 1;
            val.cash_receivable = (val.cash_receivable * 1).toFixed(2) * 1;
            val.collecting_receivable = (val.collecting_receivable * 1).toFixed(2) * 1;
            val.bank_receivable = (val.bank_receivable * 1).toFixed(2) * 1;
            val.recover = '-';
          });
          response.list.forEach(val => {
            total_receivable += (val.all_receivable * 1).toFixed(2) * 1;
            total_actual += (val.all_actual * 1).toFixed(2) * 1;
          });
          this.wx = (response.program.wx_program / 1).toFixed(2);
          this.alipay = response.qr.length > 0 ? (response.qr[0].qr_money_aliy * 1).toFixed(2) * 1 : 0;
          this.weChat = response.qr.length > 0 ? (response.qr[0].qr_money_wx * 1).toFixed(2) * 1 : 0;
          this.recover = response.recover * 1;
          this.total_receivable = (total_receivable * 1 + this.alipay * 1 + this.weChat * 1 + this.wx * 1).toFixed(2) * 1;
          this.total_actual = (total_actual * 1 + this.alipay * 1 + this.weChat * 1 + this.recover * 1 + this.wx * 1).toFixed(2) * 1;
          this.remark[0].text = response.remark ? response.remark : '-';
          if (response.list.length == 0) {
            this.list = this.nullList;
          } else {
            this.nullList = [];
            this.list = response.list;
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>